<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <script src="../../js/jquery-3.4.1.min.js"></script>
    <script src="../../js/jquery.form.js"></script>
    <script>
        var lastImg = localStorage.getItem("lastImg") || "";
        $(function () {
            handleImageCleanup();
            $("#regist").click(function () {
                lastImg = ""; // 清空图片路径
                localStorage.setItem("lastImg", lastImg);
                $("#userForm").submit();
            })

            $("#cancel").click(function () {
                if (lastImg != "") {
                    // 发送 AJAX 请求到服务器端删除图片
                    $.ajax({
                        url: '/upload/deleteFile', // 假设这是你用来删除图片的 URL
                        type: 'POST',
                        data: {filePath: lastImg},
                        success: function (response) {
                            alert(lastImg);
                            // 删除成功的回调函数
                            lastImg = ""; // 清空图片路径
                            localStorage.setItem("lastImg", lastImg);
                            $("#pic").val("");
                            window.location.href = "/user/index";


                        }
                    });

                } else {
                    window.location.href = "/user/index";
                }

            })
        })


        function submitFile(){
            alert("开始上传");
            $("#location").val($("#i-file").val());
            alert($("#location").val());
            //$("#lastImg").val("");
            $("#userForm").ajaxSubmit({
                url:"/upload/uploadFile",
                data:{
                    fileType:"pic",
                    update:"false"
                },
                dataType:"json",
                success:function (json) {
                    // alert("新图片的"+json.realPath);
                    lastImg=json.realPath;
                    localStorage.setItem("lastImg", lastImg);
                    $("#userImg").attr("src",json.realPath);
                    $("#lastImg").val(json.realPath);
                    $("#pic").val(json.relativePath);
                }
            })
        }
        function handleImageCleanup() {
            if (lastImg!= "") {
                alert(lastImg);
                // 发送 AJAX 请求到服务器端删除图片
                $.ajax({
                    url: '/upload/deleteFile', // 假设这是你用来删除图片的 URL
                    type: 'POST',
                    data: { filePath: lastImg },
                    success: function (response) {
                        alert(lastImg);
                        // 删除成功的回调函数
                        lastImg = ""; // 清空图片路径
                        localStorage.setItem("lastImg", lastImg);
                    }
                });
                alert("删除后lastImg"+lastImg)

            }
        }

    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
   <h2>用户注册</h2>
   <div style="display: flex">
       <form action="/user/regist" method="post" id="userForm">
           <%--           头像上传--%>
           <div>
               <label style="width:100px">图片</label>
               <a  href="../../img/image-1.jpg" title="Click on the right side of the image to move forward.">
                   <img id="userImg" src="../../img/thumb-1.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150" />
               </a>
           </div>
           <div>
               <label for="i-file" style="width:100px">选择文件</label>
               <div>
                   <input id="location" onclick="$('#i-file').click();">
                   <label>
                       <input  type="button" id="i-check" value="选择头像" onclick="$('#i-file').click();">
                   </label>
                   <input type="hidden" id="pic" name="pic">
                   <input type="hidden" id="lastImg" name="lastImg">
                   <input type="file" name="picfile" id='i-file'  accept=".jpg, .png" onchange="submitFile()" style="border-color: lightgray;background-color: lightgray;display: none">
               </div>
           </div>
<%--end--%>
           <div>
               用户名：<input type="text" required="" name="username" id="username" />
           </div>
           <div>
               密码：<input type="password" required="" name="password" id="password" />
           </div>
           <div>
               昵称：<input type="text" required="" name="displayName" id="displayName" />
           </div>
           <div>
               手机：<input type="text" required="" name="phone" id="phone" />
           </div>
           <button id="regist" type="submit">注册</button>
           <button id="cancel" type="button">取消注册</button>
       </form>
   </div>
</body>
</html>
